<template>
	<view class="search-box">
		<view class="header flex-between" :style="{paddingTop:statusHeight}">
			<navigator open-type="navigateBack" :delta="1" hover-class="">
				<view class="iconfont iconback"></view>
			</navigator>
			<input type="text" v-model="serachText" placeholder="搜索菜品名称" @confirm="searchGoods" confirm-type="search">
			<view class="btn flex-center" @click="searchGoods">搜索</view>
		</view>
		<view class="good-card flex-between" v-if="false">
			<navigator url="/pages/index/goodDetail" hover-class="none" class="card-item" v-for="(item,index) in 10" :key="'a5'+index">
				<image src="/static/imgs/menus1.jpg" mode="aspectFill"></image>
				<view class="card-bottom">
					<view class="title">蔬菜名字蔬菜名字</view>
					<view class="flex-between">
						<view class="price">￥15.5<text>/斤</text></view>
						<view class="iconfont iconAddwithcircleF"></view>
					</view>
				</view>
			</navigator>
		</view>
		<view class="empty flex-center" v-else>暂无此类商品</view>
	</view>
</template>

<script>
	import HeaderBox from '@/components/header.vue'
	export default {
		components: {
			HeaderBox
		},
		data() {
			return {
				statusHeight: 0,
				serachText: ""
			};
		},
		onLoad() {
			this.statusHeight = uni.getStorageSync('statusHeight') + 'px'
		},
		methods: {
			searchGoods() {
				console.log(this.serachText)
			}
		}
	}
</script>

<style lang="less">
	page{
		background: #eee;
	}
	.search-box{
		padding-top:80px;
		.empty{
			height: 30vh;
			font-size: 34rpx;
			color:#999;
		}
	}
	.header {
		position: fixed;
		top: 0;
		z-index: 1;
		width: calc(100vw - 40rpx);
		padding: 0 20rpx;
		font-size: 30rpx;
		color: white;
		height: 44px;
		background: white;
		.iconfont{
			color:#333;
			font-size: 40rpx;
		}
		input {
			width: 550rpx;
			height: 60rpx;
			border-radius: 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #333;
			background: #eee;
		}

		.btn {
			width: 100rpx;
			height: 60rpx;
			border-radius: 10rpx;
			font-size: 30rpx;
			background: #039702;
			color: #fff;
		}

	}
	.good-card{
			flex-wrap: wrap;
			width: calc(100% - 40rpx);
			margin: 10rpx auto;
			.card-item{
				width: 348rpx;
				background: white;
				border-radius: 10rpx;
				text-align: center;
				margin-bottom: 15rpx;
				overflow: hidden;
				image{
					width: 348rpx;
					height: 348rpx;
				}
				.card-bottom{
					padding: 10rpx 15rpx 20rpx;
					.title{
						font-size: 30rpx;
						color:#222;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
						margin-bottom: 10rpx;
						text-align: left;
						font-weight: bold;
					}
					.price{
						font-size: 32rpx;
						color:#f00;
						font-weight: bold;
						text{
							font-size: 24rpx;
							color:#666;
							font-weight: normal;
						}
					}
					.iconfont{
						font-size: 45rpx;
						color:#039702
					}
				}
			}
		}
	
</style>
